#nav-tab {
	.tab-bar {
		.flex-wrap;
		.justify-center;
		.align-center;
		.t-line;
		width: 100%;
		height: 49px;
		color: @tabTxtColor;
		background: #ffffff;
	}
}

.tab-item {
	.flex-item;
	display: block;
	height: 41px;
	white-space: nowrap;
	font-weight: 400;
	font-size: @l5;
	text-overflow: ellipsis;
	text-align: center;
	border: none;
	background: none;
	color: @tabTxtColor;

	.icon {
		background-size: 20px;
		margin: 0 auto;
	}

	a {
		color: @tabTxtColor;
	}

	&.active {
		color: @tabTxtColorActive;
	}
}

#nav-tab,
.w-tabbar {
	.flex-wrap-v;

	.tab-panel {
		.flex-item;
		position: relative;
		overflow: hidden;

		.panel-item {
			min-height: 120px;
			position: relative;
			display: none;

			&.active {
				display: block;
			}
		}
	}
}

.w-tabbar {
	background: #fff;
	.tab-bar {
		.flex-wrap;
		.flex-wrap-center;
		height: 44px;
		.b-line;

		.tab-item {
			position: relative;
			.flex-item;
			.flex-wrap-center;
			max-width: 150px;
			height: 100%;
			white-space: nowrap;
			text-align: center;
			line-height: 44px;
			font-size: 15px;
			color: @tabTxtColor;

			&:before {
				position: absolute;
				margin-top: -7px;
				height: 14px;
				.r-line;
			}

			&:last-child:before {
				display: none;
			}

			.icon {
				display: inline-block;
				margin: 0;
			}
		}

		.active {
			display: -webkit-flex;
			display: flex;
			color: @tabTxtColorActive;

			span {
				position: relative;

				&:before {
					content: ' ';
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 3px;
					background: @tabTxtColorActive;
				}
			}
		}
	}
}

#nav-tab {
	.tab-panel {
		.panel-item {
			.full-abs;
		}
	}
}
